在 React 中，Router params 的應用對於在不同頁面之間傳遞資料至關重要。今天將介紹如何在 React Router 中使用動態路由，包括建立動態路由、連接路由以及從 URL 中讀取資料的三個主要步驟。

步驟一：建立動態路由

首先，我們需要建立一個新的路由，以便在特定的 URL 條件下呈現相關元件，在這個範例中，我們使用了動態路由 cities/:id，其中 :id 是一個動態參數，表示我們希望在 URL 中動態傳遞的資料。

import City from "./components/City";

function App() {
  return (
    <BrowserRouter>
      <Routes>
		...
        <Route path="cities/:id" element={<City />} />
      </Routes>
    </BrowserRouter>
  );
}

步驟二：連接到動態路由

接下來，在元件中建立一個動態連結，以便在點擊時導航到我們剛剛建立的路由 cities/:id。

function CityItem({ city }) {
  const { cityName, id} = city;

  return (
    <li>
      <Link to={`/cities/${id}`}>
        <h3>{cityName}</h3>
      </Link>
    </li>
  );
}

步驟三：useParams 讀取參數

我們將使用 useParams 這一個 Hook 來實現從 URL 中提取 params，這裡的 params 物件就會是我們在路由中指定的參數名稱 id，當我們目前的路由為 /cities/f1d189f2，此時的 id 就是 f1d189f2，因此我們可以透過這個 id 去取得詳細的 API 資料。

import { useParams } from "react-router-dom";

function City() {
  // params 將會是物件的形式 { id: 'XXX' }
  const params = useParams();
  const { id } = params;
}

總結

在這篇文章中，我們認識了動態路由在 React Router 中的應用，透過建立動態路由、連接路由並讀取 URL 中的資料，我們能夠實現在不同頁面之間有效地傳遞資料。